<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="../css/0703.css">
</head>
<body>
    <nav class="navbar">
        <div class="container clear">
            <div class="navbar-header">Bootstrap</div>
            <ul class="nav navbar-nav clear">
                <li><a href="#">首页</a></li>
                <li><a href="#">网站</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">微信</a></li>
                <li><a href="#">朋友圈</a></li>
                <li><a href="#">微博</a></li>
                <li><a href="#">你你你</a></li>
                <li><a href="#">首页</a></li>
            </ul>
            <div class="num ">
                <a href="#">boostrap中文网</a>
            </div>
        </div>


    </nav>
    <div class="doc-head">
        <span>B</span>
        <p class="title">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
        <a href="#">Bootstrap下载</a>
        <p class="version">当前版本： v3.3.7 | 文档更新于：2017-05-22</p>

    </div>
     <div class="round">
            <h2 class="ttitle">为所有开发者、所有应用场景而设计。</h2>
            <p class="ahead">Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
            <div class="line"></div>
            <ul class="clear">
                
                <li>
                    <img src="../image/sass-less.png" alt="">
                    <h3>预处理脚本</h3>
                    <p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。</p>
                </li>
                 <li>
                    <img src="../image/devices.png" alt="">
                    <h3>一个框架、多种设备</h3>
                    <p>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。</p>
                </li>
                <li>
                    <img src="../image/components.png" alt="">
                    <h3>特性齐全</h3>
                    <p>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
                </li>
             
            </ul>
            <div class="line"></div>
            <p class="middle">Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。</p>
            <a href="#">查看Github主页</a>
    </div>
    <div class="around ">  
        <h2 class="ttitle">基于 Bootstrap 构建的网站</h2>
        <p class="ahead">全球数以百万计的网站都是基于 Bootstrap 构建的。你可以先参观一下我们提供的实例精选或者看一看我们粉丝的网站吧。</p>
        <div class="line"></div>
        <div class="clear">
            <img src="../image/1.png" alt="" >
            <img src="../image/2.jpg" alt="" >
            <img src="../image/3.png" alt="" >
            <img src="../image/4.png" alt="" >
        </div>
        <div class="line"></div>
        <p class="middle">我们在“优站精选”里展示了许多精美的 Bootstrap 网站。</p>
        <a href="#">逛一逛“优站精选”</a>
    </div>  
    <div class="foot">
        <div class="conteiner">
            <ul class="footstep clear">
                <li><a href="#">GitHUB仓库</a></li>
                <li><a href="#">实例</a></li>
                <li><a href="#">优站精选</a></li>
                <li><a href="#">关于</a></li>
            </ul>
            <p>Designed and built with all the love in the world by <a href="#">@mdo</a> and <a href="#">@fat</a>. Maintained by the <a href="#">core team</a> with the help of <a href="#">our contributors</a>.</p>
            <p>本项目源码受<a href="#"> MIT</a>开源协议保护，文档受 <a href="#">CC BY 3.0 </a>开源协议保护。</p>
        </div>
    </div>
</body>
</html>